<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<span style="font-weight: 600;font-size: 18px">{{(folderName!=''?'《'+folderName+'》':'')}}</span>
			</div>
		</el-header>
		<el-container>
			<el-card shadow="never" style="width:100%;overflow: auto;">
				<el-alert v-if="this.folderId==''" title="请选择目录查看文件" type="warning" style="margin-bottom:20px;"></el-alert>
				<el-col v-if="childFolderList.length==0&&fileList.length==0">
					<el-empty description="目录下没有文件" :image-size="100"></el-empty>
				</el-col>
				<el-row :gutter="15">
					<el-col style="background-color: #f9f9f9;padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in childFolderList" :key="item.fileId"
							@dblclick="openFolder(item)"
							@contextmenu.prevent.stop="openMenu('folderOtherContextmenu',$event,item)">
						<div style="text-align: center;">
							<el-icon style="font-size: 40px;">
								<el-icon-folder-opened/>
							</el-icon>
						</div>
						<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
							{{ item.fileName }}
						</div>
					</el-col>
					<el-col style="background-color: #f9f9f9;padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in fileList" :key="item.fileId"
							@contextmenu.prevent.stop="openMenu('fileContextmenu',$event,item)" @dblclick="preview(item)">
						<div style="text-align: center;">
							<el-icon style="font-size: 40px;" :title="(item.fileSize/(1024*1024)).toFixed(2)+`MB`">
								<component :is="getFileTypeIcon(item.extName)"/>
							</el-icon>
						</div>
						<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
							<span :title="item.remark">{{ item.fileName }}</span>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</el-container>
	</el-container>
	<sc-contextmenu ref="fileContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="edit" title="编辑" icon="el-icon-edit" v-if="editRole>0"></sc-contextmenu-item>
		<sc-contextmenu-item command="version" title="历史版本" icon="el-icon-expand"></sc-contextmenu-item>
		<sc-contextmenu-item command="read" title="查看" icon="el-icon-search"></sc-contextmenu-item>
		<sc-contextmenu-item command="down" title="下载" icon="el-icon-download"></sc-contextmenu-item>
		<sc-contextmenu-item command="preview" title="预览" icon="el-icon-view"></sc-contextmenu-item>
	</sc-contextmenu>
	<sc-contextmenu ref="folderOtherContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="openFolder" title="打开" icon="el-icon-plus"></sc-contextmenu-item>
	</sc-contextmenu>
	<attach-version v-if="dialog.versionSave" :attach-id="this.fileItem.attachId" ref="fileVersionDialog" @closed="dialog.versionSave=false"></attach-version>
</template>

<script>
import personShareFileUtils from '@/views/file/personal/personShareFileUtils'
import iconSelect from "@/config/iconSelect"
import scContextmenu from '@/components/scContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item'
import AttachVersion from "@/views/module/attachVersion";
export default {
	name: 'Personal File',
	mixins: [personShareFileUtils],
	components: {
		AttachVersion,
		scContextmenu,
		scContextmenuItem,
	},
	data() {
		return {
			dialog: {
				save: false,
				shareSave:false,
				versionSave:false
			},
			editRole: "",
			childFolderList: [],
			fileList: [],
			fileItem: {},
			folderId: '',
			folderName: '',
			rules: {}
		}
	},
	mounted() {
	},
	methods: {

		async getSharePersonalFileList(folderId)
		{
			var res = await this.$API.file.personalFile.getSharePersonalFileList.get({folderId: folderId});
			if (res.code == 200) {
				this.childFolderList = res.data.folderList;
				this.fileList = res.data.fileList;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		initSharePersonalFileList(item)
		{
			this.editRole = item.editRole;
			this.folderId = item.folderId;
			this.folderName = item.folderName;
			this.getSharePersonalFileList(item.folderId);
		},
		openMenu(menu, e, item) {
			this.$refs.folderOtherContextmenu.closeMenu();
			this.$refs.fileContextmenu.closeMenu();
			this.fileItem = item;
			this.$refs[menu].openMenu(e);
		},
		getFileTypeIcon(extName) {
			var iconName = "sc-icon-" + extName.substr(1, extName.length);
			if (iconSelect.icons[1].icons.indexOf(iconName) !== -1) {
				return iconName;
			} else {
				return 'sc-icon-unknown-file';
			}
		},
		openFolder(item) {
			this.getSharePersonalFileList(item.fileId);
		},
		async handleCommand(command) {
			if (command == "edit") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.fileId, 4);
			} else if (command == "read") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.fileId, 1);
			} else if (command == "version") {
				this.dialog.versionSave = true
				this.$nextTick(() => {
					this.$refs.fileVersionDialog.open()
				})
			} else if (command == "openFolder") {
				this.folderId = this.fileItem.fileId;
				this.folderName = this.fileItem.fileName;
				this.getSharePersonalFileList(this.fileItem.fileId);
			} else if (command == "preview") {
				this.preview(this.fileItem)
			} else if (command == "down") {
				this.down(this.fileItem)
			}
		},
	}
}
</script>
